<template>
    <div >
        <el-dialog :title="titleInfo" :visible.sync="showAddPatientInfo" width="35%" :show-close="false"
                   :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"  />
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="form.age"
                              maxlength="3"
                              show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex" >
                        <el-radio v-for="sexInfo in sexDateDic" :key="sexInfo.value" :label="sexInfo.value">
                            {{ sexInfo.label }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="身份证" prop="idCard">
                    <el-input v-model="form.idCard"

                              maxlength="20"
                              show-word-limit
                    ></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model.number="form.phone"
                              maxlength="11"
                              show-word-limit ></el-input>
                </el-form-item>
                <el-form-item label="感染时间" prop="startTime">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%;" ></el-date-picker>
                </el-form-item>
                <el-form-item v-if="treatIdShow" label="治疗编号" prop="treatId">
                    <el-input v-model="form.treatId"  :disabled="true" :readonly="true" />
                </el-form-item>
                <el-form-item label="确诊地点" prop="confirmedPlace">
                    <el-input v-model="form.confirmedPlace"/>
                </el-form-item>
                <el-form-item label="所属区域" prop="belongArea">
                    <el-select v-model="form.belongArea" clearable placeholder="请选择" style="width: 100%;">
                        <el-option
                            v-for="item in areaDateDic"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="感染源头" prop="infectSource">
                    <el-input v-model="form.infectSource"></el-input>
                </el-form-item>
                <el-form-item  label="患者状态" prop="patientState">
                    <el-select v-model="form.patientState" clearable placeholder="请选择" style="width: 100%;">
                        <el-option
                            v-for="item in patientStateDic"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button v-show="addButtonShow" type="primary" @click="submitForm('form')">立即创建</el-button>
                    <el-button v-show="editButtonShow" type="primary" @click="updateForm('form')">修改</el-button>
                    <el-button v-show="addButtonShow" @click="resetForm('form')">重置</el-button>
                    <el-button @click="closeDetailDialog">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import {mapActions} from "vuex";

export default {
    name: "addPatientInfo.vue",
    props: {
        editButtonShow: {type: Boolean, default: false},
        treatIdShow: {type: Boolean, default: false},
        showAddPatientInfo: {type: Boolean, default: false},
        addButtonShow: {type: Boolean, default: false},
        id: {type: String, default: ''},
        sexDateDic: {type: Array, default: () => []},
        areaDateDic: {type: Array, default: () => []},
        patientStateDic: {type: Array, default: () => []},
        titleInfo: {type: String, default: '新增感染者信息'},
    },
    data() {
        return {
            form: {
                id: '',
                name: '',
                age: '',
                sex: '',
                idCard: '',
                phone: '',
                infectSource: '',
                startTime: '',
                treatId: '',
                confirmedPlace: '',
                belongArea: '',
                patientState: '',
            },
            rules: {
                name: [
                    {required: true, message: '请填写姓名', trigger: 'change'}
                ],
                age: [
                    {required: true, message: '年龄不能为空', trigger: 'change'},
                    {type: 'number', message: '年龄必须为数字值', trigger: 'change'}
                ],
                sex: [
                    {required: true, message: '选择性别', trigger: 'change'}
                ],
                idCard: [
                    {required: true, message: '请填写身份证信息', trigger: 'change'},
                    {min: 6, message: '身份证信息请填写完整', trigger: 'change'}
                ],
                phone: [
                    {required: true, message: '请填写联系方式', trigger: 'change'},
                    {type: 'number', message: '年龄必须为数字值', trigger: 'change'}

                ],
                infectSource: [
                    {required: true, message: '请至少选择一个活动性质', trigger: 'change'}
                ],
                startTime: [
                    {required: true, message: '请填写患者确诊时间', trigger: 'change'}
                ],
                treatId: [
                    {required: true, message: '请填写活动形式', trigger: 'blur'}
                ],
                confirmedPlace: [
                    {required: true, message: '请填写确定地点', trigger: 'change'}
                ],
                belongArea: [
                    {required: true, message: '请选择患者所属区域', trigger: 'change'}
                ],
                patientState: [
                    {required: true, message: '请填写患者状态', trigger: 'blur'}
                ],
            },
        };
    },
    watch: {
        showAddPatientInfo: {
            immediate: true,
            handler(newValue, oldValue) {
                if (newValue === true && this.id !== null && this.id !== '' && this.id !== undefined) {
                    this.detailInfo(this.id)
                }
            }
        }
    },
    methods: {
        ...mapActions("patientInfo", ["addPatientInfo","patientInfoInfoDetail","updatePatientInfo"]),
        // 详情查询
        async detailInfo(id) {
            let res = await this.patientInfoInfoDetail(id)
            this.form = res.data
        },
        // 修改
        updateForm(formInfo) {
            this.$refs[formInfo].validate(async valid => {
                if (valid) {
                    const res = await this.updatePatientInfo(this.form)
                    if (res.data === true) {
                        this.$message({
                            message: '感染者修改成功',
                            type: 'success'
                        });
                        this.closeAddForm();
                    }
                } else {
                    return false;
                }
            });
        },
        // 提交
        submitForm(formInfo) {
            this.$refs[formInfo].validate(async valid => {
                if (valid) {
                    const res = await this.addPatientInfo(this.form)
                    if (res.data === true) {
                        this.$message({
                            message: '患者信息添加成功',
                            type: 'success'
                        });
                        this.form = {}
                        await this.closeAddForm();
                    }
                } else {
                    return false;
                }
            });
        },
        resetForm(formInfo) {
            if (this.$refs[formInfo] !== undefined) {
                this.$refs[formInfo].resetFields();
            }
        },
        // 隐藏新增框
        closeAddForm(formInfo) {
            this.$emit('showTableInfo')
            this.closeInfoDialog()
        },
        // 关闭dialog
        closeDetailDialog() {
            this.closeInfoDialog()
        },
        // 关闭dialog所做的操作
        closeInfoDialog() {
            this.resetForm('form')
            this.$emit('update:showAddPatientInfo', false)
            this.$emit('update:id', null)
            this.$emit('update:editButtonShow', false)
            this.$emit('update:treatIdShow', false)
            this.$emit('update:addButtonShow', false)
            this.$emit('update:titleInfo', '新增感染者信息')
        }
    }
}
</script>

<style scoped>

</style>
